<template>
	<view>
		<view class="header-top">
			<view class="header">
				<image class="header-bg" src="https://youlinapi.zhihui361.com/image/wx/homebg.png" mode=""></image>
				<view class="header-inner fa prow28" :style="{paddingTop: utils.menuButtonTop(), height: utils.menuButtonHeight()}">
					<view class="fa" @click="utils.navTo('/pages/index/community')">
						<image class="location-icon" src="../../static/location.png" mode=""></image>
						<view class="community ell1">{{community}}</view>
						<image class="down-icon" src="../../static/down.png" mode=""></image>
					</view>
					<view class="search-box fa" @click="utils.navTo('/pages/index/search')">
						<image class="search-icon" src="../../static/search.png" mode=""></image>
						<view>搜索商品</view>
					</view>
				</view>
			</view>
			<view class="header-place" :style="{paddingTop: utils.menuButtonTop(), height: utils.menuButtonHeight()}"></view>
			<image class="topbg" src="https://youlinapi.zhihui361.com/image/wx/homebg.png" mode=""></image>
		</view>
		<view class="main pr">
			<swiper class="swiper" :indicator-dots="true" indicator-color="#ccc" indicator-active-color="#fff" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<view class="swiper-item">
						<image :src="item" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="fetch-box fa jcsb">
				<image class="fetch-image" src="../../static/home1.png" mode="" @click="utils.navTo('/pages/index/help_fetch', {type: 0})"></image>
				<image class="fetch-image" src="../../static/home2.png" mode="" @click="utils.navTo('/pages/index/help_fetch', {type: 1})"></image>
			</view>
			<view class="notice-box fa jcsb" @click="utils.navTo('/pages/mine/message')" v-if="noticeList.length > 0">
				<view class="title fa jcc">
					<image class="notice1" src="../../static/notice1.png" mode=""></image>
					<image class="notice2" src="../../static/notice2.png" mode=""></image>
				</view>
				<view class="list fa">
					<swiper class="noticeswiper" :vertical="true" :autoplay="true" :interval="3000" :duration="500">
						<swiper-item v-for="(item, index) in noticeList" :key="index">
							<view class="noticeitem ell1">{{item.content}}</view>
						</swiper-item>
					</swiper>
					<image class="right-icon" src="../../static/right.png" mode=""></image>
				</view>
			</view>
			<swiper class="coupon-box" display-multiple-items="2" v-if="couponList.length > 0">
				<swiper-item v-for="(item, index) in couponList" :key="index">
					<view class="coupon-list pr">
						<image class="coupon-bg" src="../../static/home3.png" mode=""></image>
						<view class="coupon-inner pr" @click="receiveCoupon(item.couponId)">
							<view class="money" v-if="item.derate">{{item.derate}}</view>
							<view class="full" v-if="item.need">满{{item.need}}元使用</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="onsale-box pr" v-if="onsaleGoods.length > 0">
				<image class="onsale-bg" src="../../static/home4.png" mode=""></image>
				<view class="onsale-inner pr">
					<view class="more-box fa jcfe">
						<view class="more fa" @click="goOnsale">
							<view>查看更多</view>
							<image class="right-icon" src="../../static/right.png" mode=""></image>
						</view>
					</view>
					<swiper class="recommend-box" display-multiple-items="2.7">
						<swiper-item v-for="(item, index) in onsaleGoods" :key="index">
							<view class="recommend-list" @click="utils.navTo('/pages/cate/goods_detail', {id: item.productId})">
								<image class="goods-img" :src="item.mainImg" mode="aspectFill"></image>
								<view class="name ell1">{{item.name}}</view>
								<view class="price-box fa">
									<view class="price">¥{{item.price}}</view>
									<view class="market-price">￥{{item.marketPrice}}</view>
								</view>
							</view>
						</swiper-item>
						<swiper-item></swiper-item>
						<swiper-item v-if="onsaleGoods.length < 3"></swiper-item>
						<swiper-item v-if="onsaleGoods.length < 3"></swiper-item>
					</swiper>
				</view>
			</view>
			<image class="hot-title" src="../../static/home5.png" mode="" v-if="goodsList.length > 0"></image>
			<view class="hot-box flex fww" v-if="goodsList.length > 0">
				<view class="hot-list" v-for="(item, index) in goodsList" :key="index" @click="utils.navTo('/pages/cate/goods_detail', {id: item.productId})">
					<image class="goods-img" :src="item.mainImg" mode=""></image>
					<view class="name ell2">{{item.name}}</view>
					<view class="price-box fa">
						<view class="price">¥{{item.price}}</view>
						<view class="market-price">￥{{item.marketPrice}}</view>
					</view>
				</view>
			</view>
			<view class="nomore fa jcc" v-if="nomore">没有更多了~</view>
		</view>
		<uni-popup ref="vippop" type="center" :mask-click="false" border-radius="10px 10px 10rpx 10rpx">
			<view class="vip-wrapper fa fdc">
				<view class="vip-box pr" @click="receiveVip">
					<image class="vip-image" src="https://youlinapi.zhihui361.com/image/wx/vip3.png" mode=""></image>
					<view class="vip-inner pr fa jcc">VIP30天</view>
				</view>
				<image class="close-icon" src="../../static/close3.png" mode="" @click="closeVippop"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				longitude: '',
				latitude: '',
				community: '选择小区',
				bannerList: [],
				noticeList: [],
				couponList: [],
				onsaleGoods: [],
				cateId: '',
				page: 1,
				count: 0,
				goodsList: [],
				nomore: 0,
				vipHasShow: 0
			}
		},
		onLoad() {
			this.getBanner()
			this.getNotice()
			this.getCate()
			this.getGoods()
			this.getLocation()
			uni.$on("selectCommunity", e => {
				this.community = e
			})
		},
		onShow() {
			this.getUserinfo()
			this.getCoupon()
			if(uni.getStorageSync('cartNum')) {
				this.count = uni.getStorageSync('cartNum')
				uni.setTabBarBadge({
					index: 2,
					text: String(this.count)
				})
				setTimeout(() => {
					uni.removeStorageSync('cartNum')
				}, 1000)
			}
		},
		onUnload() {
			uni.$off("selectCommunity")
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getBanner()
				this.getNotice()
				this.getUserinfo()
				this.getCoupon()
				this.getCate()
				this.page = 1
				this.count = 0
				this.getGoods()
				if(this.community == 'community') {
					this.getLocation()
				}
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom() {
			if(this.goodsList.length < this.count) {
				this.page++
				this.getGoods()
			}
		},
		onShareAppMessage() {
			return {
				title: '邀请你使用社区帮小程序',
				path: '/pages/index/index'
			}
		},
		onShareTimeline() {
			return {
				title: '邀请你使用社区帮小程序',
				path: '/pages/index/index'
			}
		},
		methods: {
			getUserinfo() {
				this.api.userinfoFunc().then(res => {
					if(res.code == 200) {
						if(!res.data.vipEnd && this.vipHasShow == 0) {
							this.$refs.vippop.open()
							this.vipHasShow = 1
						}
					}
				})
			},
			closeVippop() {
				this.$refs.vippop.close()
				this.vipHasShow = 1
			},
			// 领取会员立即体验
			receiveVip() {
				this.$refs.vippop.close()
				this.api.getVipFunc().then(res => {
					if(res.code == 200) {
						uni.showToast({
							title: '领取成功'
						})
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					})
				})
			},
			getLocation() {
				uni.getLocation({
					success: result => {
						this.longitude = result.longitude
						this.latitude = result.latitude
						this.getCommunity()
					},
					fail: error => {
						console.log(error)
						uni.showToast({
							title: '获取位置信息失败，请先打开手机定位功能',
							icon: 'none'
						})
					}
				})
			},
			getCommunity() {
				this.api.communityListFunc({
					longitude: this.longitude,
					latitude: this.latitude
				}).then(res => {
					if(res.code == 200) {
						if(res.data) {
							this.community = res.data[0].name
						}
					}
				})
			},
			goVip() {
				let token = uni.getStorageSync('token')
				if(token) {
					this.$refs.vippop.close()
					uni.navigateTo({
						url: '/pages/mine/vip'
					})
				}else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			goOnsale() {
				if(this.cateId) {
					uni.setStorageSync('cateId', this.cateId)
				}
				uni.switchTab({
					url: '/pages/cate/cate'
				})
			},
			getBanner() {
				this.api.bannerFunc().then(res => {
					if(res.code == 200) {
						this.bannerList = res.data
					}
				})
			},
			getNotice() {
				this.api.noticeListFunc().then(res => {
					if(res.code == 200) {
						this.noticeList = res.rows
					}
				})
			},
			getCoupon() {
				this.api.couponListFunc().then(res => {
					if(res.code == 200) {
						this.couponList = res.data
					}
				})
			},
			// 今日特价的商品传今日特价的ID，是分类下的第一个
			getCate() {
				this.api.cateFunc().then(res => {
					if(res.code == 200) {
						if(res.data && res.data[0].classifyId) {
							this.cateId = res.data[0].classifyId
							this.api.goodsListFunc({
								topClassifyId: res.data[0].classifyId
							}).then(res => {
								if(res.code == 200) {
									this.onsaleGoods = res.rows
									if(this.onsaleGoods.length > 6) {
										this.onsaleGoods.length = 6
									}
								}
							})
						}
					}
				})
			},
			// 商品列表
			getGoods() {
				this.api.goodsListFunc({
					pageNum: this.page
				}).then(res => {
					if(res.code == 200) {
						this.count = res.total
						this.goodsList = this.page == 1 ? res.rows : this.goodsList.concat(res.rows)
					}
				})
			},
			receiveCoupon(id) {
				uni.showLoading({
					title: '加载中'
				})
				this.api.couponSaveFunc({
					couponId: id
				}).then(res => {
					uni.hideLoading()
					if(res.code == 200) {
						uni.showToast({
							title: '领取成功'
						})
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					this.getCoupon()
				}).catch(err => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-top{
		.header{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
			overflow: hidden;
			.header-bg{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				width: 100%;
				height: 554rpx;
			}
			.header-inner{
				position: relative;
				padding-bottom: 16rpx;
				padding-right: 240rpx;
				color: #fff;
				.location-icon{
					margin-right: 4rpx;
					width: 32rpx;
					height: 32rpx;
				}
				.community{
					max-width: 150rpx;
				}
				.down-icon{
					margin-left: 8rpx;
					width: 30rpx;
					height: 30rpx;
				}
				.search-box{
					margin-left: 42rpx;
					padding: 0 24rpx;
					flex: 1;
					height: 64rpx;
					border-radius: 32rpx;
					color: #aaa;
					background-color: #fff;
					.search-icon{
						margin-right: 16rpx;
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}
		.header-place{
			padding-bottom: 12rpx;
		}
		.topbg{
			position: fixed;
			top: 0;
			width: 100%;
			height: 554rpx;
		}
	}
	.swiper{
		margin: 20rpx 24rpx 0;
		height: 218rpx;
		border-radius: 10rpx;
		image{
			width: 100%;
			height: 218rpx;
			border-radius: 10rpx;
		}
	}
	.fetch-box{
		margin: 20rpx 24rpx 0;
		.fetch-image{
			width: 344rpx;
			height: 200rpx;
		}
	}
	.notice-box{
		margin: 20rpx 24rpx 0;
		padding-left: 4rpx;
		box-sizing: border-box;
		height: 68rpx;
		border-radius: 12rpx;
		font-size: 24rpx;
		.title{
			.notice1{
				width: 33rpx;
				height: 29rpx;
			}
			.notice2{
				margin-left: 12rpx;
				width:165rpx;
				height: 33rpx;
			}
		}
		.list{
			position: relative;
			margin-left: 12rpx;
			padding-left: 14rpx;
			width: 540rpx;
			height: 100%;
			&::after{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 4rpx;
				height: 28rpx;
				border-radius: 2rpx;
				background-color: #E6E6E6;
			}
			.noticeswiper{
				width: 100%;
				height:64rpx;
				.noticeitem{
					width: 100%;
					line-height:64rpx;
					font-size: 26rpx;
					color:#333333;
				}
			}
			.right-icon{
				width: 28rpx;
				height: 28rpx;
			}
		}
	}
	.coupon-box{
		margin: 12rpx 24rpx 0;
		height: 130rpx;
		.coupon-list{
			width: 340rpx;
			height: 130rpx;
			color: #EF241E;
			.coupon-bg{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				width: 100%;
				height: 100%;
			}
			.coupon-inner{
				width: 100%;
				height: 100%;
			}
			.money{
				position: absolute;
				left: 38rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 80rpx;
				text-align: center;
				font-size: 36rpx;
				font-weight: bold;
				line-height: 112rpx;
			}
			.full{
				position: absolute;
				top: 28rpx;
				right: 8rpx;
				font-size: 26rpx;
				font-weight: bold;
				line-height: 30rpx;
			}
		}
	}
	.onsale-box{
		margin: 14rpx 24rpx 0;
		width: 702rpx;
		height: 469rpx;
		.onsale-bg{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;
		}
		.onsale-inner{
			.more-box{
				padding-right: 34rpx;
				height: 80rpx;
				.more{
					padding: 0 10rpx 0 22rpx;
					height: 44rpx;
					border-radius: 22rpx;
					font-size: 22rpx;
					color: #666;
					background-color: #fff;
					.right-icon{
						margin-left: 4rpx;
						width: 22rpx;
						height: 22rpx;
					}
				}
			}
			.recommend-box{
				margin: 20rpx 0 20rpx 24rpx;
				padding: 24rpx 22rpx;
				box-sizing: border-box;
				height: 350rpx;
				border-radius: 16rpx;
				background-color: #fff;
				.goods-img{
					width: 220rpx;
					height: 220rpx;
					border-radius: 10rpx;
				}
				.name{
					margin-top: 12rpx;
					width: 220rpx;
					font-size: 26rpx;
					font-weight: bold;
					line-height: 30rpx;
				}
				.price-box{
					margin-top: 6rpx;
					width: 220rpx;
					.price{
						font-size: 24rpx;
						color: #FE3134;
					}
					.market-price{
						margin-left: 6rpx;
						font-size: 22rpx;
						color: #777;
						line-height: 26rpx;
						text-decoration: line-through;
					}
				}
			}
		}
	}
	.hot-title{
		margin: 28rpx 24rpx 0;
		width: 702rpx;
		height: 48rpx;
	}
	.hot-box{
		margin: 30rpx 26rpx 0;
		padding: 22rpx 0 2rpx;
		.hot-list{
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			border-radius: 16rpx;
			background-color: #fff;
			&:nth-child(2n){
				margin-left: 22rpx;
			}
			.goods-img{
				width: 338rpx;
				height: 338rpx;
				border-radius: 16rpx 16rpx 0 0;
			}
			.name{
				padding: 0 8rpx;
				width: 335rpx;
				font-size: 26rpx;
				box-sizing: border-box;
			}
			.price-box{
				margin-top: 6rpx;
				padding: 0 8rpx;
				width: 220rpx;
				.price{
					font-size: 24rpx;
					color: #FE3134;
				}
				.market-price{
					margin-left: 6rpx;
					font-size: 22rpx;
					color: #777;
					line-height: 26rpx;
					text-decoration: line-through;
				}
			}
		}
	}
	.nomore{
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #999;
	}
	.vip-wrapper{
		.vip-box{
			width: 608rpx;
			height: 608rpx;
			.vip-image{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				width: 608rpx;
				height: 608rpx;
			}
			.vip-inner{
				margin-top: 236rpx;
				font-size: 96rpx;
				font-weight: bold;
				color: #763A14;
				line-height: 112rpx;
			}
		}
		.close-icon{
			margin-top: 42rpx;
			width: 64rpx;
			height: 64rpx;
		}
	}
	
</style>
